<template>
  <div class="app-container">

    <el-row :gutter="12">
      <el-col :span="4">
        <el-card shadow="hover" style="cursor: pointer; background: #6fc3df; color: white" @click.native="changeTable('todo')">我的待办</el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="hover" style="cursor: pointer; background: #bcd35f; color: white" @click.native="changeTable('done')">我的已办</el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="hover" style="cursor: pointer; background: #bcbec2; color: white" @click.native="changeTable('mine')">我发起的</el-card>
      </el-col>
    </el-row>

    <div v-if="activeName=='todo'">
      <h3>我的待办</h3>
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="" prop="key">
          <el-input
            v-model="queryParams.taskId"
            placeholder="请输入任务id"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="name">
          <el-input
            v-model="queryParams.keyword"
            placeholder="标题、流程名称等"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          <el-divider direction="vertical"></el-divider>
        </el-form-item>
      </el-form>

      <el-table v-loading="loading" :data="todoList">
        <!--<el-table-column type="selection" align="left" width="55" />-->
        <el-table-column label="任务id" align="left" prop="taskId" width="120" />
        <el-table-column label="标题" align="left" prop="instanceName" width="300" />
        <el-table-column label="流程" align="left" prop="definitionName" width="200" />
        <el-table-column label="开始时间" align="left" prop="createTime" width="180" />
        <el-table-column label="发起人" align="left" prop="creatorName" width="150" />
        <el-table-column label="发起时间" align="left" prop="startTime" width="180" />
        <el-table-column label="节点" align="left" prop="taskName" width="200" />
        <el-table-column label="状态" align="left" prop="state" width="200" />
        <el-table-column label="操作" align="left" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="handleShowForm(scope.row)"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <div v-if="activeName=='done'">
      <h3>我的已办</h3>
    </div>

    <div v-if="activeName=='mine'">
      <h3>我发起的</h3>
    </div>

  </div>
</template>

<script>
  import { listDefinition, delDefinition, suspendOrActiveDefinition, convert2Model, start, getProcDef } from "@/api/activiti/definition.js"
  import { taskDetail, todoList, doneList, claim, complete, back, reject } from "@/api/activiti/task.js"

  export default {
    name: "Task",
    data() {
      return {
        activeName: 'todo',
        loading: true,// 遮罩层
        ids: [],// 选中数组
        total: 0,
        todoList: [],//待办列表
        doneList: [],//已办列表
        mineList: [],//我发起的列表
        queryParams: {// 查询参数
          pageNum: 1,
          pageSize: 10,
          taskId: null,
          keyword: undefined,
        }
      };
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询任务列表 */
      getList() {
        this.loading = true;
        todoList(this.queryParams).then(
          response => {
            this.todoList = response.rows;
            this.total = response.total;
            this.loading = false;
          }
        );
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 新增按钮操作 */
      handleUpload() {
        this.open = true;
        this.title = "部署流程定义";
      },
      /** 跳转页面 */
      handleShowForm(row) {
          getProcDef(row.definitionId).then(res => {
              this.$router.push("/openform/audit/" + res.data.deploymentId + "/" + row.definitionId.replace(/:/g,"_") + "/" + row.taskId);
          });
      },
        changeTable(title){
          this.activeName=title;
        }
    },
  }
</script>

<style scoped>

</style>
